<template>
  <view>
    <view class="search-box">
      <uni-search-bar @input="input" :focus="true" :radius="100" cancelButton="none"  confirm-type="search" @confirm='doSearch' clearButton='auto' v-model="kw">
      </uni-search-bar>
    </view>
    <!-- 搜索建议列表 -->
    <view class="sugg-list" v-if="searchResult.length!==0">
      <view class="sugg-item" v-for="(item,i) in searchResult" :key="i" @click="gotoGoodsDetail(item.goods_id)">
        <view class="good-name">{{item.goods_name}}</view>
        <uni-icons type="arrowright" size="17"></uni-icons>
      </view>
    </view>
    <!-- 搜索历史区域 -->
    <view class="history-box" v-else>
      <!-- 搜索头部区域 -->
      <view class="history-title">
        <text>搜索历史</text>
        <uni-icons type="trash" size="25" @click="deletehistory"></uni-icons>
      </view>
      <!-- 搜索列表区域 -->
      <view class="history-list">
        <view class="history-list-item" v-for="(item,i) in historylist" :key="i" @click="historySearch(i)">
          <uni-tag :text="item"></uni-tag>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        timer: null,
        // 搜索关键词
        kw: '',
        searchResult: [],
        historylist: []
      };
    },
    onLoad(){
      this.historylist=JSON.parse(uni.getStorageSync("kw")||'[]')
    },
    methods: {
      doSearch(){
        console.log(123);
        uni.navigateTo({
          url:"/subpkg/goods_list/goods_list?query="+this.kw
        })
      },
      input(e) {
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.kw = e
          this.getSearchResult()
          
        }, 500)
      },
      async getSearchResult() {
        if (this.kw == '') {
          this.searchResult = []
          return
        }
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/goods/qsearch', {
          query: this.kw
        })
        if (res.meta.status !== 200) return uni.$showMsg()
        this.searchResult = res.message
        if(this.searchResult.length==0) return uni.$showMsg('找不到该商品哦*.*')
        this.historyStorage()
      },
      gotoGoodsDetail(id) {
        uni.navigateTo({
          url: "/subpkg/good_detail/good_detail?goods_id=" + id
        })
      },
      deletehistory() {
        this.historylist=[]
        uni.clearStorageSync('kw')
      },
      historySearch(i) {
        this.kw = this.historylist[i]
      },
      historyStorage(){
        if (!this.historylist.includes(this.kw)) {
          this.historylist.unshift(this.kw)
        }
        uni.setStorageSync("kw",JSON.stringify(this.historylist))
      }
    }
  }
</script>

<style lang="scss">
  .search-box {
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .sugg-list {
    padding: 0 5px;

    .sugg-item {
      font-size: 12px;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .good-name {
        // 不允许换行
        white-space: nowrap;
        // 溢出隐藏
        overflow: hidden;
        // 超出显示小圆点
        text-overflow: ellipsis;
      }
    }
  }

  .history-box {
    padding: 0 5px;

    .history-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      height: 40px;
    }

    .history-list {
      border-top: 1px solid #eee;
      display: flex;
      flex-wrap: wrap;

      .history-list-item {
        margin-right: 10px;
        margin-top: 5px;
      }
    }
  }
</style>
